<template>
  <view class="wrap">
    <view class="banner-box">
      <kevy-swiper
        :list="bannerList"
        :width="684"
        :height="480"
        :autoPlay="true"
        :autoPlayInterval="5000"
        :showDot="true"
        :descAniType="'slideFromRight'"
        :dotColor="'#E5E6EB'"
        :dotSelectedColor="'#00D1B6'"
      />
    </view>

    <view class="list">
      <view class="list-item" v-for="(item, index) in listData" :key="index">
        <view class="title">
          <view class="title-icon" />
          <text class="title-text">{{ item.title }}</text>
        </view>
        <view class="content">
          <text class="content-text">
            {{ item.content }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import KevySwiper from '@/module/src/components/kevy-swiper.vue'

const bannerList = reactive([
  {
    pageUrl: `/module/src/pages/sleep/breatheHelpsSleep/index`,
    imgUrl: `https://ainengli.meilianshuke.com/jkhx/weight/banner2.png`
  },
  {
    pageUrl: `/module/src/pages/sleep/music/index`,
    imgUrl: `https://ainengli.meilianshuke.com/jkhx/weight/banner3.png`
  },
  {
    pageUrl: `/module/src/pages/sleep/sleepAssessment/index`,
    imgUrl: `https://ainengli.meilianshuke.com/jkhx/weight/banner4.png`
  }
])

const listData = reactive([
  {
    title: '静坐冥想',
    content: `坐在椅子上或者地上（用冥想坐垫或蒲团支撑），练习正念冥想， 把温和的注意力放到你选择聚焦的对象上。这个聚焦的对象可以是呼吸，身体，声音，想法，感受，以及无拣择觉察（就是把注意力放在任何进入你觉知意识的事物上）。`
  },
  {
    title: '身体扫描',
    content: `躺在瑜伽垫或床上，把温和的注意力放到身体每个部位的感觉上，从脚趾到头顶，与身体重新连结起来。为了防止做身体扫描练习时睡着，你也可以选择坐着来做身体扫描。`
  },
  {
    title: '正念运动',
    content: `站着或躺在瑜伽垫上，练习正念运动，把温和的注意力放到身体每一个动作。瑜伽，太极，气功，还有其他伸展练习都是很不错的正念运动练习，只要你每时每刻保持正念觉察。`
  },
  {
    title: '正念进食',
    content: `正念地吃一餐饭，唤醒你的五感（视觉，嗅觉，触觉，味觉，听觉），把注意力完全投入到进食的过程。这可能给你早已遗忘的很不一样的体验。`
  },
  {
    title: '正念行走',
    content: `特意加快或者放慢行走的步伐，也不是为了把你带到什么地方，只是完完全全与自己的身体和呼吸同在。`
  },
  {
    title: '正念生活',
    content: `你可以把生活中每一个活动都变成正念练习，比如正念地刷牙，洗澡，或做饭。`
  }
])
</script>
<style lang="scss" scoped>
.wrap {
  width: 100%;
  min-height: 100vh;
  padding: 34rpx 32rpx;
  background-color: #fff;
}

.banner-box {
  width: 100%;
  height: 546rpx;
  margin-bottom: 16rpx;
}

.list {
  .list-item {
    margin-bottom: 50rpx;
  }
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  .title-icon {
    width: 8rpx;
    height: 32rpx;
    margin-right: 16rpx;
    background-color: #00d1b6;
    border-radius: 0 4rpx 4rpx 0;
  }

  .title-text {
    font-size: 36rpx;
    font-weight: 700;
    color: #222;
  }
}

.content {
  padding: 32rpx 32rpx 32rpx 34rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #222;
  background: rgb(0 209 182 / 5%);
  border-radius: 24rpx;

  .content-text {
    display: block;
    line-height: 50rpx;
    text-align: justify;
  }
}
</style>
